<template>
  <view class="page">
	  <view class="header-container">
	      <!-- 自定义导航栏 -->
		  <view class="status_bar" :style="{height: statusBarHeight + 'px'}"></view>
	      <view class="custom-navbar" ><!-- :style="{padding-top: statusBarHeight + 'px'}" -->
	        <view class="location-info" @click="chooseLocation">
	          <image class="location-icon" src="/static/img/icon_coordinate@2x.png" mode="aspectFit"></image>
	          <text class="location-text" v-if="ckCity.type==2">{{ckCity.areaName}}</text>
			   <text class="location-text" v-else>{{locationCity.cityName}}</text>
	          <image class="arrow-down" src="/static/img/icon_arrow_def@2x.png" mode="aspectFit"></image>
	        </view>
	      </view>
	      
	      <!-- 搜索框区域 -->
	      <view class="search-area" @click="handleSearch">
	        <view class="search-box">
	          <image class="search-icon" src="/static/img/icon_search@2x.png" mode="aspectFit"></image>
	          <input 
	            class="search-input" 
	            placeholder="请输入商家、商品名称" 
	            placeholder-class="placeholder-style"
	            
	          />
	          <view class="search-btn" >搜索</view>
	        </view>
	      </view>
	    </view>
		 <view class="status_bar" :style="{height: statusBarHeight + 'px'}"></view>
		 <view style="height: 200rpx;"></view>
		 
		 <!-- 中间轮播-->
		<!-- <view class="swiper-container">
		   <swiper 
		     class="custom-swiper"
		     :autoplay="true"
		     :interval="3000"
		     :circular="false"
		     :display-multiple-items="3"
		   >
		     <swiper-item v-for="(item, index) in goodsList2" :key="index"  @click="goDetail(item)">
		       <view class="goods-item">
		         商品图片 
		         <image class="goods-image" :src="item.coverUrl" mode="aspectFill"></image>
		         
		         商品信息
		         <view class="goods-info">
		           <text class="goods-name">{{item.name}}</text>
		           <text class="goods-original-price">¥{{item.originalPrice}}</text>
		           <view class="goods-bottom">
		             <text class="goods-price">¥{{item.currentPrice}}</text>
		             <view class="buy-btn">抢</view>
		           </view>
		         </view>
		       </view>
		     </swiper-item>
		   </swiper>
		 </view> -->
    <!-- 顶部Tab切换 -->
	<!-- <view class="qunBox" @click="goLogin">
		登录
	</view> -->
	<view class="swiper-container" v-if="bicAdvertisementImage.length">
		<swiper
		  class="custom-swiper"
		  :autoplay="true"
		  :interval="3000"
		  :circular="false"
		>
		  <swiper-item v-for="(item,index) in bicAdvertisementImage">
			  <view class="swView">
				    <image :src="item.imageUrl" mode="widthFix" class="qunImg"></image>
			  </view>
		  </swiper-item>
		 
		</swiper>
	</view>
	
	<!-- <image src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com:443/3126ce18-0fe5-4406-bdf0-ecc85155cfcf" mode=""></image> -->
	<view style="height: 20rpx;"></view>
	<!-- <view class="qunBox" @click="goQun">
		<image src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com/temp%2F%E9%9C%B8%E7%8E%8B%E9%A4%90%E6%8A%A2%E5%85%88%E9%A2%86_1754803522268.png" mode="widthFix" class="qunImg"></image>
	</view> -->
    <view class="tab-container">
      <scroll-view class="tab-scroll" scroll-x>
        <view 
          class="tab-item" 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="{ active: currentTab === index }"
          @click="switchTab(index,tab)"
        >
          {{tab.name}}
        </view>
      </scroll-view>
    </view> 

    <!-- 商品列表 -->
    <view class="goods-list">
	  <view v-for="(item, index) in goodsList2" :key="index" @click="goDetail(item)">
		  <view class="goods-item" v-if="item.currentStock>0">
		    <!-- 商品图片 -->
			<view >
				<image class="goods-img" v-if="item.packageCoverImage" :src="item.packageCoverImage" mode="aspectFill"></image>
				<image class="goods-img" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
			</view>
		    <!-- 商品信息 -->
		    <view class="goods-info">
		      <!-- 第一行：商品名称 -->
		      <view class="goods-name">{{item.name}}</view>
		      
		      <!-- 第二行：分享标签和距离 -->
		      <view class="row-second">
		  			  <view >
		  				  <view class="share-tag" v-if="item.share==1"> 分享得金币</view>
		  			  </view>
		        <view v-if="item.mapVos">
		  				<!-- v-if="item.mapVos.length>0" -->
		  			 <view class="distance" >距离:{{item.mapVos[0].distanceStr}}</view> 
		  			</view>
		       
		      </view>
		      <view class="threeROw">
		      	<!-- 第三行：价格信息 -->
		      	<view class="price-section">
		      	  <view class="price-left">
		      	    <text class="sale-price">¥{{item.newPrice}}</text>
		      	    <text class="market-price">¥{{item.originalPrice}}</text>
		      	  </view>
		      	 <view class="price-right">
		      	    <text class="views">{{item.browseNum}}人浏览</text>
		      	    <text class="bargain-count">{{item.bargainNum}}人砍价</text>
		      	  </view> 
		      	</view>
		      	
		      	<!-- 砍价按钮 -->
		  			<view v-if="item.currentStock>0">
		  				<view class="bargain-btn" v-if="item.type==2&&item.bargain">再砍</view>
		  				<view class="bargain-btn" v-else-if ="item.type==2&&item.bargain==false" @click.stop="bargainItem(item)">砍价</view>
		  				<view class="bargain-btn" v-else>抢购</view>
		  			</view>
		  			<view v-else class="bargain-btn2">售罄</view>
		      	
		      </view>
		     
		    </view>
		  </view>
		  <view v-else>
		  		<image class="goods-imgLogo" v-if="item.logo" :src="item.logo" mode=""></image><!-- aspectFill -->
		  		<image class="goods-imgLogo" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
		 </view>
		  
		  
	  </view>
     
	  
	  
    </view>
	<nodata v-show="goodsList2.length==0"></nodata>
	
	<!-- 群弹框 -->
	<view class="tkBox" v-if="tkShow" @click="goQun">
		<view class="tkCont2">
			<view class="tkImgBox"  >
				<image src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com:443/temp%2Fqun_1759149858361.png" mode="widthFix" class="tkimg"></image>
				
			</view><!-- @click="tkClose" -->
			<view class="tkImgBox"><image  src="/static/img/chahao.png" mode="" class="tkChao"></image></view>
		</view>
	</view>
	<!-- 优惠券弹框 -->
	<view class="tkBox tkBoxyhq" v-if="yhqShow">
		<view class="tkCont">
			<view class="tkImgBox yhqBox">
				<image src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com/temp%2F%E5%85%88%E9%A2%86%E5%88%B8%E5%86%8D%E8%B4%AD%E7%89%A9_1755960479042.png" mode="widthFix" class="tkimg"></image>
				 <view class="yhqNum">{{yhqamount?yhqamount:'0'}}</view>
				 <view class="minSpend">满{{minSpend?minSpend:'0'}}元可用</view>
			</view>
			<view class="tkImgBox"><image @click="yhqClose" src="/static/img/chahao.png" mode="" class="tkChao"></image></view>
		</view>
	</view>
	
	<!-- 砍价弹框 -->
	<view class="tkBox" v-if="bargainShow">
		<view>
			<view class="bargainBox">
				<view class="bargainTitle">恭喜成功砍掉</view>
				<view class="bargainNum">{{bargainNum}}元</view>
				<view class="bargainMs">
					<span>今日您的砍价机会已用完(</span>
					<span style="color:#FF0000;">每个账号一天只可砍价一次</span>
					<span>),点击</span>
					<span tyle="color:#FF0000;">"邀请帮砍"</span>
					<span>召集更多好友一起砍价!</span>
				</view>
			</view>
			<view class="tkImgBox"><image @click="bargainClose" src="/static/img/chahao.png" mode="" class="tkChao"></image></view>
		</view>
		
	</view>
	 
	<!-- <view @click="scanCode">扫码</view> -->
	
  </view>
</template>

<script>
import nodata from '@/components/nodata/nodata.vue'
export default {
  components: {
  	nodata
  },
  data() {
    return {
      currentTab: 0,
      tabs: [
        { name: '全部',ltype:'', },
		/* { name: '西餐',ltype:1 },
		{ name: '烧烤烤串',ltype:4 },
		{ name: '火锅',ltype:2 },
		{ name: '自助',ltype:16 },
        { name: '休闲娱乐',ltype:17  },
        { name: '地方菜',ltype:18 },
        { name: '小吃快餐',ltype:24 },
        { name: '酒旅',ltype:25 }, */
		
      ],
	  tabs2:[
		  { name: '西餐',ltype:1 },
		  { name: '烧烤烤串',ltype:4 },
		  { name: '火锅',ltype:2 },
		  { name: '自助',ltype:16 },
		  { name: '休闲娱乐',ltype:17  },
		  { name: '地方菜',ltype:18 },
		  { name: '小吃快餐',ltype:24 },
		  { name: '酒旅',ltype:25 }
	  ],
      goodsList2: [
        
      ],
	  goodsList: [],
	  tkShow:false,
	  statusBarHeight: 0,
	  locationText: '北京市朝阳区',
	  locationCity: {
	  	cityName: '',
	  	cityCode: '',
	  	lng: '',
	  	lat: '',
		areaCode:'',
	  },
	  page:1,
	  yhqShow:false,
	  userInfo:'',
	  yhqamount:'',
	  bargainShow:false,
	  bargainNum:'',
	  minSpend:'',
	  productCategory:'',
	  bicAdvertisementImage:[],
	  ckCity:{
		  type:'',
	  },
	  areaName:'',
	  getNum:1,
	  openid:'',
	  shareId:'',
	  scene:'',
	  version:2,
	  xsversion:'',
    }
  },
   mounted() {
      // 获取状态栏高度
	   this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
      // 获取当前位置信息
      this.userInfo=uni.getStorageSync("userInfo")
	  if(this.userInfo){
		 // this.sendNewUserCoupon()
		 this.pushActivityCoupon()
	  }
	  uni.getAccountInfoSync()
	
	
	 
    },
  onLoad(opt){
	  this.getLocation()
	  var shareId=opt.shareId
	  var userInfo=uni.getStorageSync("userInfo")
	  var scene= opt.scene
	  //scene = '7e6ad671ce3e468283fecfc28009f8a6'
	  if(!userInfo&&scene){
	  	this.scene=scene
		this.getWxQrCodeScene()
		return false
	  }
	  if(!userInfo&&shareId){
		  uni.navigateTo({
		  	url:'login?shareId='+shareId
		  })
	  }else{
		  this.bicAdvertisementImageInfo()
		  this.loginToServerFn()
	  }
	 // this.getAppVersion()
	  //this.handleWechatLogin()
	 
  },
  onShow() {
  /* 	if(this.locationCity.lat){
		this.getList()
	} */
	this.ckCity=uni.getStorageSync("ckCity")
	if(!this.ckCity){
		this.ckCity = {
			type:''
		}
	}
	/* if(this.ckCity.type==2){
		
	} */
	this.page=1
	if(this.getNum==2){
		this.getList()
	}
	
  },
  onPullDownRefresh() {
  	//下拉刷新
  	 this.page==1
  	 this.getList()
  	 this.bicAdvertisementImageInfo()
  	setTimeout(function() {
  		uni.stopPullDownRefresh();
  	}, 1000);
  },
  onReachBottom() {
  	this.page++;
     this.getList()
  },
  methods: {
	  getAppVersion(){
		  this.$http('jeecg-boot/api/wx/getAppVersion',{
		  		  
		  },'GET').then(res => {
		  		  this.xsversion=res.result
				 // console.log(this.xsversion)
				 if(this.xsversion == this.version){
					 
				 }else{
					 //正常的
					 this.tabs=this.tabs.concat(this.tabs2)
				 }
		  })
	  },
	  getWxQrCodeScene(){
	  	var obj={
	  		scene:this.scene
	  	}
	  	this.$http('jeecg-boot/app/wx/code/getWxQrCodeScene',{
	  			 "scene":this.scene
	  	},'POST').then(res => {
	  			   //console.log(res)
	  		 var bizData=res.result.bizData
	  		 bizData=JSON.parse(bizData)
	  		 console.log(bizData)
	  		 this.shareId= bizData.userId
			 console.log("this.shareId==" +this.shareId)
			 uni.navigateTo({
			 	url:'login?shareId='+this.shareId
			 })
	  	 })
	  },
  //广告 /app/market/bicAdvertisementImageInfo/list  goodsConsumeTypeinteger 可选商品消费类型：一口价/霸王餐
  bicAdvertisementImageInfo(){
	  this.$http('jeecg-boot/app/market/bicAdvertisementImageInfo/list',{
	  		   goodsConsumeType:2
	  },'GET').then(res => {
		  this.bicAdvertisementImage=res.result
	  })
  },
   bargainItem(item){
	   uni.showLoading({
	   	title: '加载中'
	   })
	   this.$http('jeecg-boot/app/market/bicBargainDetail/bargain',{
	   		   productId:item.id,
	   		   type:1,
	   		   userId:this.userInfo.id
	   },'POST').then(res => {
	   		   //console.log(res)
		 
	   	 uni.hideLoading();
	   	 if(res.success){
			 item.bargain=true
			 /* uni.showToast({
			     title:'砍价成功',
			 	   icon:'none',
			     duration: 3000,
			 }) */
			 this.bargainNum=res.result.bargainAmount
			 item.bargainNum++
			 item.newPrice=item.newPrice - this.bargainNum
			 item.newPrice= item.newPrice.toFixed(2)
			 this.bargainShow=true
		 }else{
			uni.showToast({
			    title:res.message,
				icon:'none',
			    duration: 3000,
			}) 
		 }
	   	 
	    })
   },
   
   sendNewUserCoupon(){
	   this.$http('jeecg-boot/app/market/bicCoupon/sendNewUserCoupon',{
	   		   userId:this.userInfo.id
	   },'POST').then(res => {
	   		   //console.log(res)
	   	if(res.success){
			  this.yhqamount=res.result.amount
			  this.minSpend=res.result.minSpend
			  this.yhqShow=true
	   	}else{
			this.pushActivityCoupon()
		}
  })
		
		
   },
   pushActivityCoupon(){
	   this.$http('jeecg-boot/app/market/bicCoupon/pushActivityCoupon',{
	   		   userId:this.userInfo.id
	   },'POST').then(res => {
	   		   //console.log(res)
	   	  if(res.success){
	   		  this.yhqamount=res.result.amount
			  this.minSpend=res.result.minSpend
	   		  this.yhqShow=true
	   	  }else{
			 this.tkShow=true 
		  }
	    })
   },
   bargainClose(){
	 this.bargainShow=false
   },
   yhqClose(){
	this.yhqShow=false
	//this.tkShow=true
   },
   goQun(){
	 uni.navigateTo({
	 	url:'qun'
	 })  
	 this.tkShow=false;
   },
   goLogin(){
	 uni.navigateTo({
	 	url:'login'
	 })  
   },
   getList(){
	   uni.showLoading({
	   	title: '加载中'
	   })
	   if(this.page==1){
		    this.goodsList2=[]
	   }
	   if(this.ckCity.type==2){
	   	var obj={
			pageNo:this.page,
			pageSize:10,
			//startLng:this.locationCity.lng,
			//startLat:this.locationCity.lat,
			userId:this.userInfo.id,
			type:2,
			productCategory:this.productCategory,
			area:this.ckCity.areaCode,
			appVersion:this.version
		}
	   }else{
		   var obj={
		   pageNo:this.page,
		   pageSize:10,
		   startLng:this.locationCity.lng,
		   startLat:this.locationCity.lat,
		   userId:this.userInfo.id,
		   type:2,
		   productCategory:this.productCategory,
		   appVersion:this.version
		   //area:this.ckCity.areaCode
	   }
	   }
	   
	   this.$http('jeecg-boot/app/market/bicProduct/qyeryPage',obj,'POST').then(res => {
		   //console.log(res)
	   	 uni.hideLoading();
		 var goodsList=res.result.records
		 goodsList.forEach(item=>{
			 if(item.mapVos&&item.mapVos!='null'&&item.mapVos!=null){
				 item.mapVos.sort((a, b) => a.distance - b.distance);
			 }
			 var admJianNum=item.admJianNum?item.admJianNum:0
			 var newPrice=item.currentPrice + admJianNum
			 item.newPrice=newPrice.toFixed(2)
		 })
		 this.goodsList2=[...this.goodsList2, ...goodsList]
		 //console.log(this.goodsList2)
	   	 //this.goodsList2=res.result.records
		/* if(this.goodsList2.length<20&&goodsList.length){
			 var chongfudata=this.goodsList2
			 this.goodsList2=[...this.goodsList2, ...chongfudata]
			// this.goodsList2=[...this.goodsList2, ...chongfudata]
		 } */
	    })
   },
   chooseLocation(){
	  /* this.getNum=2
	   uni.navigateTo({
	   	url:'city?areaName='+this.areaName
	   })  */
   },
   goDetail(item){
	 uni.navigateTo({
	 	url:'goodsDetail?id='+item.id
	 })  
   },
   getLocation() {
	   const that = this
		uni.authorize({
			scope: 'scope.userLocation',
			success() {
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res)
						that.locationCity.lng = res.longitude
						that.locationCity.lat = res.latitude
						uni.setStorageSync('location',that.locationCity )
						
						that.getAdress();
						that.ckCity.type=1
						that.getNum=2
						 that.getList()
				
					},
					fail(err) {
						//that.locationCity.lng = '116.397334'
						//that.locationCity.lat = '39.909266'
						//uni.setStorageSync('location',that.locationCity )
						console.log(err)
						that.getNum=2
				       that.getList()
					}
				});
			},
			fail: (err) => {
				//that.locationCity.lng = '116.397334'
				//that.locationCity.lat = '39.909266'
				//uni.setStorageSync('location',that.locationCity )
				that.getNum=2
				 that.getList()
				 
			}})
		/* uni.getLocation({
		  type: 'gcj02',
		  success: (res) => {
			// 实际项目中可以通过逆地理编码获取具体地址
			this.locationText = '北京市朝阳区'
		  },
		  fail: () => {
			this.locationText = '定位失败，点击重试'
		  }
		}) */
	  },
	  getAdress() {
	  	// 根据经纬度 逆城市地理编码 获取城市信息
	  	var location = this.locationCity.lng + ',' + this.locationCity.lat
	  	uni.request({
	  		url: 'https://restapi.amap.com/v3/geocode/regeo',
	  		data: {
	  			key: 'f87da741974e48d8a634be5f802a11b1',
	  			location: location,
	  			//location: '117.06533,36.68013',
	  			//types: "190000",
	  			//extensions: "all",
	  			//radius: 100
	  		},
	  		dataType: "json",
	  		success: (res) => {
	  			console.log('定位城市', res);
	  			if(res.data.regeocode){
	  				console.log("城市名称")
	  				 console.log(res.data.regeocode.addressComponent.city)
	  				// console.log(res.data.pois[0].cityname)
	  				let cityname = res.data.regeocode.addressComponent.city+res.data.regeocode.addressComponent.district;
	  				var cityCode = res.data.regeocode.addressComponent.adcode
					this.locationCity.areaCode = cityCode
	  				cityCode = cityCode.slice(0, -2)
	  				cityCode = cityCode + '00'
	  				this.locationCity.cityName = cityname
	  				this.locationCity.cityCode = cityCode
					var ckCity={
						areaCode:cityCode,
						areaName:res.data.regeocode.addressComponent.city,
						type:1
					}
					this.ckCity=ckCity
					this.areaName=res.data.regeocode.addressComponent.city
					uni.setStorageSync('ckCity', ckCity)
					uni.setStorageSync('ckCity2', ckCity)
	  				uni.setStorage({
	  					key: 'locationCity',
	  					data: this.locationCity,
	  					success: function() {
	  						console.log('定位城市,保存成功');
	  					}
	  				})
	  			}else{
	  				console.log("接口获取失败")
	  			}
	  			
	  		}
	  	});
	  },
    switchTab(index,item) {
      this.currentTab = index
	  this.productCategory=item.ltype
	  this.page=1
	  this.getList()
      // 这里可以添加加载对应分类商品的逻辑
    },
	tkClose(){
		this.tkShow=false
	},
	handleSearch() {
	   uni.navigateTo({
	   	url:'search'
	   })
	},
	loginToServerFn(){
		uni.login({
		  provider: 'weixin',
		  success: (loginRes) => {
		    console.log('微信登录成功', loginRes);
		    // 这里可以获取到code，需要发送到你的后端服务器换取openid和session_key
		    const code = loginRes.code;
		    
		    // 获取用户信息
		    uni.getUserInfo({
		      provider: 'weixin',
		      success: (infoRes) => {
		        console.log('用户信息', infoRes);
		        // 这里可以获取用户信息，如昵称、头像等
		        const userInfo = infoRes.userInfo;
		        
		        // 通常这里会调用后端API，将code和userInfo发送到服务器
		         this.loginToServer(code, userInfo);
		       
		      },
		      fail: (err) => {
		        console.log('获取用户信息失败', err);
		        uni.showToast({
		          title: '获取用户信息失败',
		          icon: 'none'
		        });
		      }
		    });
		  },
		  fail: (err) => {
		    console.log('微信登录失败', err);
		    uni.showToast({
		      title: '登录失败',
		      icon: 'none'
		    });
		  }
		});
	},
	loginToServer(code, userInfo) {
	  // 示例代码，实际项目中需要替换为你的API调用
	 console.log(code)
	 uni.showLoading({
	 	title: '加载中'
	 })
	 this.$http('jeecg-boot/api/wx/getOpeId',{
	 	js_code:code
	 },'POST').then(res => {
	 	 console.log(res.result)
		 this.openid=res.result
		 uni.setStorageSync('openid',this.openid ) 
	 	// uni.hideLoading();
	 	 this.wxLogin()
	  })
	
	},
	wxLogin(){
		this.$http('jeecg-boot/sys/wxLogin',{
			username:this.openid,
			//sharePerson:this.shareId
		},'POST').then(res => {
			
			 uni.hideLoading();
			if(res.success){
				 
				 var userInfo=res.result.userInfo
				 var token=res.result.token
				 uni.setStorageSync('userInfo', userInfo)
				uni.setStorageSync('token',token ) 
				  this.pushActivityCoupon() 
			}else{
				/* uni.showToast({
					 title: res.message,
					 icon:'none',
					 duration: 3000,
				 }); */
			}
		 })
	},
	scanCode(){
		uni.scanCode({
			success: function (res) {
				console.log('条码类型：' + res.scanType);
				console.log(res);
			}
		});
	}
  },
  onReachBottom() {
  	this.page++;
  
  	this.getList()
  },
  computed: {
    // 只显示能被3整除的商品数量，确保最后一行完整
    visibleGoods() {
      const count = Math.floor(this.goodsList.length / 3) * 3;
      return this.goodsList.slice(0, count);
    }
  }
}
</script>

<style scoped lang="less">
.page {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 顶部Tab样式 */
.tab-container {
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.tab-scroll {
  white-space: nowrap;
  width: 100%;
}

.tab-item {
  display: inline-block;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333;
  height: 60rpx;
  line-height: 60rpx;
  position: relative;
}

.tab-item.active {
  color: #EC0F0A;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #EC0F0A;
  border-radius: 2rpx;
}

/* 商品列表样式 */
.goods-list {
  padding: 20rpx;
  .goods-item {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .goods-img {
    width: 240rpx;
    height: 240rpx;
    flex-shrink: 0;
  }
  
  .goods-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
  }
  
  .goods-name {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .row-second {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .share-tag {
    font-size: 22rpx;
    color: #EC0F0A;
    border: 1rpx solid #EC0F0A;
    border-radius: 20rpx;
    padding: 4rpx 12rpx;
  }
  
  .distance {
    font-size: 24rpx;
    color: #999;
  }
  
  .price-section {
   /* display: flex;
    justify-content: space-between;
    margin-top: auto; */
  }
  .threeROw{
  	display: flex;
  	 justify-content: space-between;
  }
  .price-left {
    display: flex;
    align-items: baseline;
  }
  
  .sale-price {
    font-size: 36rpx;
    color: #EC0F0A;
    font-weight: bold;
    margin-right: 10rpx;
  }
  
  .market-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
  
  .price-right {
   /* display: flex;
    flex-direction: column;
    align-items: flex-end; */
  }
  
  .views, .bargain-count {
    font-size: 22rpx;
    color: #999;
  }
  
  .bargain-btn {
    align-self: flex-end;
    margin-top: 10rpx;
    background: linear-gradient(to right, #FF5F5F, #EC0F0A);
    color: #fff;
    font-size: 26rpx;
    padding: 8rpx 30rpx;
    border-radius: 30rpx;
    box-shadow: 0 4rpx 10rpx rgba(236, 15, 10, 0.3);
  }
  .bargain-btn2{
	  align-self: flex-end;
	  margin-top: 10rpx;
	  background: #999;
	  color: #fff;
	  font-size: 26rpx;
	  padding: 8rpx 30rpx;
	  border-radius: 30rpx;
	  box-shadow: 0 4rpx 10rpx rgba(236, 15, 10, 0.3);
  }
}


.tkBox{
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0;left: 0;
	z-index: 1111;
	    display: flex;
	    align-items: center;
	    justify-content: center;
}
.tkCont{
	/* margin-top: 30vh; */
}
.tkCont2{
	/* margin-top: 25vh; */
	padding-top: 120rpx;
}
.tkImgBox{
	text-align: center;
}
.tkCont2 .tkimg{
	width: 70vw;
}
.tkimg{
	width: 80vw;
}
.tkChao{
	width: 50rpx;height: 50rpx;margin-top: 50rpx;
}
.header-container {
 /* background: linear-gradient(to right, #ff5e5e, #ff2d2d); */
  background:#6d4424;
  padding-bottom: 30rpx;
  position: fixed;
  z-index: 10;
  top: 0;left: 0;
  width: 100%;
}

/* 自定义导航栏样式 */
.custom-navbar {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  padding-right: 30rpx;
  
  .location-info {
    display: flex;
    align-items: center;
    max-width: 60%;
    
    .location-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
    
    .location-text {
      font-size: 32rpx;
      color: #fff;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .arrow-down {
      width: 24rpx;
      height: 24rpx;
      margin-left: 8rpx;
    }
  }
}

/* 搜索区域样式 */
.search-area {
  padding: 0 30rpx;
  margin-top: 10rpx;
  
  .search-box {
    height: 80rpx;
    background: #fff;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .search-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
    }
    
    .search-input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      color: #333;
      
      .placeholder-style {
        color: #999;
        font-size: 28rpx;
      }
    }
    
    .search-btn {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
      border-radius: 30rpx;
     /* background: linear-gradient(to right, #ff5e5e, #ff2d2d); */
	 background: #6d4424;
      margin-left: 10rpx;
    }
  }
}


.swiper-container {
  width: 100%;
 /* padding: 20rpx 0; */
  background-color: #fff;
}

.custom-swiper {
  height: 420rpx;
  
  .goods-item {
    width: 92%;
    height: 420rpx;
    margin: 0 auto;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: #f8f8f8;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .goods-image {
      width: 100%;
      height: 220rpx;
      display: block;
    }
    
    .goods-info {
      padding: 16rpx;
      
      .goods-name {
        font-size: 26rpx;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.4;
        height: 72rpx;
      }
      
      .goods-original-price {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
        display: block;
        margin-top: 8rpx;
      }
      
      .goods-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12rpx;
        
        .goods-price {
          font-size: 32rpx;
          color: #ff2d2d;
          font-weight: bold;
        }
        
        .buy-btn {
          width: 60rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          color: #fff;
          font-size: 24rpx;
          border-radius: 20rpx;
          background: linear-gradient(to right, #ff5e5e, #ff2d2d);
        }
      }
    }
  }
}
.qunBox{
	padding: 24rpx;
	background: #fff;
}
.qunImg{
	
	width: 100%;
}
.yhqBox{
	position: relative;
}
.yhqNum{
	position: absolute;
	    color: #fff;
	    font-size: 60rpx;
	    top: 190rpx;
	    left: 18vw;
}
.minSpend{
	position: absolute;
	    color: #fff;
	       font-size: 30rpx;
	       top: 200rpx;
	       left: 46vw;
}
.tkBoxyhq{
	z-index: 111;
}
.bargainBox{
	width: 500rpx;
	padding: 50rpx 30rpx;
	background: #fff;
	border-radius: 16rpx;
/* 	margin-top: 35vh; */
	margin-left: 75rpx;
}
.bargainTitle{
	font-weight: 600;
	font-size: 30rpx;
	text-align: center;
}
.bargainNum{
	padding: 30rpx;
	font-size: 32rpx;
	font-weight: 600;
	text-align: center;
	color:#FF0000;
}
.swView{
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.goods-imgLogo{
	width: 100%;
	height: 300rpx;
	border-radius: 20rpx;
}
</style>